<template>
  <div class="app-left">
    <div :class="logoClass">
      <a class="logo" href="./">
        <img src="../../../assets/imgs/logo.svg" />
      </a>
      <a class="icon-menu-fold">
        <rt-icon
          :name="isCollapse ? 'rt-portal-unfold' : 'rt-portal-fold'"
          color="#fff"
          size="16"
          style="cursor:hand"
          @click="foldMenu"
        />
      </a>
    </div>

    <div class="nax-box">
      <el-menu
        :collapse="isCollapse"
        :unique-opened="true"
        :default-active="defaultActiveMenu"
        class="el-menu-dark"
        @select="handleMenuClick"
      >
        <template v-for="menu in menuList">
          <el-submenu
            v-if="menu.SubMenu && menu.SubMenu.length > 0"
            :key="menu.MenuId"
            :index="menu.MenuCode"
          >
            <template slot="title">
              <rt-icon :size="18" name="rt-portal-fold" />
              <span slot="title">{{ menu.MenuDesc }}</span>
            </template>
            <el-menu-item
              v-for="submenu in menu.SubMenu"
              :index="submenu.FormUrl"
              :key="submenu.MenuId"
              >{{ submenu.MenuDesc }}</el-menu-item
            >
          </el-submenu>
          <el-menu-item v-else :index="menu.FormUrl" :key="menu.MenuId">
            <rt-icon :size="18" name="rt-portal-fold" />
            <span slot="title">{{ menu.MenuDesc }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <!-- <button @click="test()">test</button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultActiveMenu: '',
      menuListData: [
        {
          FormUrl: 'home',
          MenuDesc: '首页',
          Icon:
            '/api/attachment/download/new_outermenu/d8ef8d8e-b4a4-e911-a12b-000c294b5ba3',
          MenuCode: 'SYs01',
          MenuId: '1',
          MenuSeq: 1,
          PMenuId: '',
          Platform: null,
          PmenuOption: null
        },
        {
          FormUrl: 'active/list',
          MenuDesc: '活动管理',
          Icon:
            '/api/attachment/download/new_outermenu/d8ef8d8e-b4a4-e911-a12b-000c294b5ba3',
          MenuCode: 'SYs02',
          MenuId: '2',
          MenuSeq: 2,
          PMenuId: '',
          Platform: null,
          PmenuOption: null,
          SubMenu: [
            {
              FormUrl: 'campaign/list',
              Icon: '',
              MenuCode: 'CHOOSEPRODU',
              MenuDesc: '活动列表',
              MenuId: '9e14c5ca-b0a4-e911-a1fdsa000c294b5b',
              MenuSeq: 10,
              PMenuId: '10',
              Platform: null,
              PmenuOption: null
            }
          ]
        },
        {
          FormUrl: 'article/list',
          MenuDesc: '文章管理',
          Icon:
            '/api/attachment/download/new_outermenu/d8ef8d8e-b4a4-e911-a12b-000c294b5ba3',
          MenuCode: 'SYs03',
          MenuId: '3',
          MenuSeq: 3,
          PMenuId: '',
          Platform: null,
          PmenuOption: null,
          SubMenu: [
            {
              FormUrl: 'article/list',
              Icon: '',
              MenuCode: 'CHOOSEPRODU',
              MenuDesc: '文章列表',
              MenuId: '9e14c5ca-b0a4-e911-a1fdsa000c294b5ba3',
              MenuSeq: 4,
              PMenuId: '3',
              Platform: null,
              PmenuOption: null,
              SubMenu: []
            },
            {
              FormUrl: 'articletype/list',
              Icon: '',
              MenuCode: 'CHOOSEPT',
              MenuDesc: '分类列表',
              MenuId: '9e14c5ca-b0a4-e911-a1fdsa000c294b5by4',
              MenuSeq: 5,
              PMenuId: '3',
              Platform: null,
              PmenuOption: null,
              SubMenu: []
            }
          ]
        },
        {
          FormUrl: 'comment/list',
          MenuDesc: '审核中心',
          Icon:
            '/api/attachment/download/new_outermenu/d8ef8d8e-b4a4-e911-a12b-000c294b5ba3',
          MenuCode: 'SYs04',
          MenuId: '5',
          MenuSeq: 5,
          PMenuId: '',
          Platform: null,
          PmenuOption: null,
          SubMenu: [
            {
              FormUrl: 'comment/list',
              Icon: '',
              MenuCode: 'CHOOSEPRODU',
              MenuDesc: '评论审核',
              MenuId: '9e14c5ca-b0a4-e911-a1fdsa000c294b5ba3',
              MenuSeq: 4,
              PMenuId: '5',
              Platform: null,
              PmenuOption: null,
              SubMenu: []
            }
          ]
        },
        {
          FormUrl: 'contact/list',
          MenuDesc: '小瑞联系人',
          Icon:
            '/api/attachment/download/new_outermenu/d8ef8d8e-b4a4-e911-a12b-000c294b5iio',
          MenuCode: 'SYs05',
          MenuId: '11',
          MenuSeq: 11,
          PMenuId: '',
          Platform: null,
          PmenuOption: null,
          SubMenu: [
            {
              FormUrl: 'contact/list',
              Icon: '',
              MenuCode: 'CHOOSEPRODU',
              MenuDesc: '联系人列表',
              MenuId: '9e14c5ca-b0a4-e911-a1fdsa000c294b5ba0',
              MenuSeq: 7,
              PMenuId: '11',
              Platform: null,
              PmenuOption: null,
              SubMenu: []
            }
          ]
        },
        {
          FormUrl: 'opend/list',
          MenuDesc: '分析中心',
          Icon:
            '/api/attachment/download/new_outermenu/d8ef8d8e-b4a4-e911-a12b-000c294b5ba3',
          MenuCode: 'SYsdadadad',
          MenuId: '77',
          MenuSeq: 77,
          PMenuId: '',
          Platform: null,
          PmenuOption: null,
          SubMenu: [
            {
              FormUrl: 'campaignanalysis/list',
              Icon: '',
              MenuCode: 'CHOOSEPRO',
              MenuDesc: '活动分析',
              MenuId: '9e14c5ca-b0a4-e911-a1fdsa000c294b5b',
              MenuSeq: 71,
              PMenuId: '71',
              Platform: null,
              PmenuOption: null,
              SubMenu: []
            }
          ]
        }
      ],
      menuList: [],
      defaultActive: null
    };
  },
  computed: {
    isCollapse() {
      return this.$store.state.ui.navCollapsed;
    },
    logoClass() {
      return [
        'logo-box',
        {
          'is-collapse': this.isCollapse,
          'is-expanded': !this.isCollapse
        }
      ];
    }
  },
  mounted() {
    this.bindMenus();
  },
  methods: {
    foldMenu() {
      this.$store.commit('UPDATE_NAV_COLLAPSE', !this.isCollapse);
    },
    bindMenus() {
      this.menuListData.map(menu => {
        menu.collapse = true;
      });
      this.menuList = this.menuList.concat(this.menuListData);
      this.defaultActiveMenu = this.getDefaultActiveMenu();
    },
    handleMenuClick(url, indexPath) {
      if (url.startsWith('iframe:')) {
        this.$router.push({ name: '/external/' });
      } else {
        this.$router.push({ path: '/' + url }); //取配置地址
      }
    },
    getDefaultActiveMenu() {
      var currentRoutePath = this.$route.fullPath;
      if (!currentRoutePath) {
        var menuList = this.menuList;
        if (menuList && menuList.length > 0) {
          var subMenu = menuList[0].submenu;
          if (subMenu && subMenu.length > 0) {
            currentRoutePath = subMenu[0].FormUrl;
          } else {
            currentRoutePath = menuList[0].FormUrl;
          }
        }
      }
      return currentRoutePath.split('/').join('') || '';
    }
  }
};
</script>
